<template>
    <div class="app-container">
        <gantt class="left-container" :tasks="tasks"></gantt>

        <el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
        <el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success" />
        <el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning" />
        <el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception" />
    </div>
</template>


<style scoped>
.app-container .el-progress--line {
    margin-bottom: 15px;
    max-width: 600px;
}
</style>

<script>
import Gantt from '@/components/Gantt';
import { getGanttListFromService } from '@/api/zone/gantt';
import { gantt } from 'dhtmlx-gantt';
// 中文引入
// import "dhtmlx-gantt/codebase/locale/locale_cn.js";
export default {
    name: 'ganttIndex',
    components: { Gantt },
    data() {
        return {
            tasks: this.getGanttList()
            // {
            //     data: [
            //         {
            //             remark:"i am lqq",id: 1, text: "合同签订", start_date: "2021-01-01", duration: 13, order: 10,
            //             progress: 0.4, open: true, parent: 0
            //         },
            //         {
            //             id: 11, text: "第一次付款", start_date: "2021-03-01", duration: 45, order: 10,
            //             progress: 0.6, open: false, parent: 1
            //         },
            //         {
            //             id: 12, text: "第二次付款", start_date: "2021-12-01", duration: 45, order: 20,
            //             progress: 0.6, parent: 1
            //         },
            //         {
            //             id: 13, text: "第三次付款", start_date: "2022-01-01", duration: 45, order: 20,
            //             progress: 0.6, parent: 1
            //         },
            //         {
            //             id: 2, text: "项目实施", start_date: "2021-01-01", duration: 45, order: 20,
            //             progress: 0.4, open: true
            //         },
            //         {
            //             id: 21, text: "准备阶段", start_date: "2021-03-01", duration: 78, order: 10,
            //             progress: 0.6, parent: 2
            //         },
            //         {
            //             id: 22, text: "设计阶段", start_date: "2021-04-01", duration: 100, order: 20,
            //             progress: 0.6, parent: 2
            //         },
            //         {
            //             id: 24, text: "系统开发", start_date: "2021-06-01", duration: 80, order: 40,
            //             progress: 1, parent: 2
            //         },
            //         {
            //             id: 25, text: "系统测试", start_date: "2021-10-01", duration: 40, order: 50,
            //             progress: 0.4, parent: 2
            //         },
            //         {
            //             id: 26, text: "上线准备", start_date: "2021-12-01", duration: 45, order: 60,
            //             progress: 0.4, parent: 2
            //         }
            //     ],
            //     // 脱线
            //     links: [
            //         // { id: 1, source: 1, target: 2, type: '0' }
            //     ]
            // }

        };
    },
    mounted() {

    },
    created() {
        //this.getGanttList();写到组件里 不会在这里刷新
    },
    methods: {
        /** 查询GANTT DATA */
        getGanttList() {
            getGanttListFromService().then(response => {
                //功能故障，内容不生效 值没问题 应该是渲染问题 可看官方文档
                //console.log(response.data)
                //this.tasks.data=response.data;
                //  this.tasks.data=response.data.data;
                //  this.tasks.links=response.data.Link;
                //  this.tasks.type=Object;
                this.tasks = response.data;                 //console.log(gantt);
                //console.log(Gantt.getGanttInstance());
                //gantt.init(gantt);
                gantt.clearAll();
                gantt.parse(response.data);

                // this.tasks.links=response.data.Link;
                // console.log(response.data[1]);
                //  this.$refs.gantt.init();
                //  this.$refs.gantt.clearAll();
                //  this.$refs.gantt.parse(this.tasks);

                //  Gantt.getGanttInstance.init(this.$refs.gantt);
                //  Gantt.getGanttInstance.clearAll();
                //  Gantt.getGanttInstance.parse(this.tasks);

                //Gantt.init();
                // this.tasks.data[1].text=response.data[1].text;
                // this.tasks.data[1].start_date=response.data[1].start_date;
                // this.tasks.data[1].id=response.data[1].id;
                // this.tasks.data[1].duration=response.data[1].duration;
                // this.tasks.data[1].progress=response.data[1].progress;
                // this.tasks.data[1].parent=response.data[1].parent;
                // this.tasks.data[1].order=response.data[1].order;
                // this.tasks.data[1].open=response.data[1].open;
            });

        }
    }
}
</script>

<style>
.container {
    height: 450px;
    width: 100%;
}

.left-container {
    overflow: hidden;
    position: relative;
    height: 450px;
}
</style>